import React, {FC} from 'react';
import {View, Text, StyleSheet, Image, Dimensions} from 'react-native';
import icon_heart_empty from '../../assets/icon_heart_empty.png';

type PropsType = {
  comments?: ArticleComment[];
};
const {width: SCREEN_WIDTH} = Dimensions.get('window');
const CommentChildren: FC<PropsType> = (props: PropsType) => {
  const {comments} = props;
  return (
    <>
      {comments?.map((item, index) => {
        return (
          <View key={`item.userName-${index}`} style={styles.commentItem}>
            <Image
              source={{uri: item.avatarUrl}}
              style={styles.commentAvatarImg}
            />
            <View style={styles.commentLayout}>
              <Text style={styles.usernameTxt}>{item.userName}</Text>
              <Text style={styles.messageTxt}>
                {item.message}
                <Text style={styles.timeAndLocationTxt}>
                  {item.dateTime} {item.location}
                </Text>
              </Text>
              <CommentChildren comments={item.children} />
            </View>
            <View style={styles.favoriteLayout}>
              <Image source={icon_heart_empty} style={styles.favoriteImg} />
              <Text style={styles.favoriteTxt}>{item.favoriteCount}</Text>
            </View>
          </View>
        );
      })}
    </>
  );
};

const styles = StyleSheet.create({
  commentItem: {
    width: SCREEN_WIDTH - 96,
    flexDirection: 'row',
    paddingTop: 10,
  },
  commentAvatarImg: {
    width: 40,
    height: 40,
    borderRadius: 20,
    resizeMode: 'contain',
  },
  commentLayout: {
    flex: 1,
    flexDirection: 'column',
    marginLeft: 10,
  },

  usernameTxt: {
    fontSize: 14,
    color: '#999',
  },
  messageTxt: {
    fontSize: 14,
    color: '#333',
    marginTop: 6,
  },
  timeAndLocationTxt: {
    fontSize: 12,
    color: '#999',
  },
  favoriteLayout: {
    flexDirection: 'column',
    alignItems: 'center',
  },
  favoriteImg: {
    width: 20,
    height: 20,
    resizeMode: 'contain',
  },
  favoriteTxt: {
    fontSize: 14,
    color: '#999',
    marginTop: 4,
  },
  divider: {
    width: '100%',
    height: 1,
    backgroundColor: '#ddd',
    marginLeft: 60,
  },
});
export default CommentChildren;
